<template>
  <div class="songlist">
    <!-- 歌单头部 -->
    <div class="title">
      <div
        class="backimg"
        :style="'background: url('+logo+') center/100% 100% no-repeat '"
      ></div>
      <!-- background: color image position/size repeat origin clip attachment initial | inherit; -->
      <div class="
        content">
        <div class="cont">
          <div class="imgbox">
            <img
              :src="logo"
              alt=""
            >
          </div>
          <div class="t_txt">
            <p>{{dissname}}</p>
            <div class="nickname">
              <div class="titleimg">
                <img
                  class="headportrait"
                  :src="headurl"
                  alt=""
                >
              </div>
              <p>{{nickname}}</p>
              <p></p>
            </div>
            <p class="introduce">简介: {{desc}} </p>
          </div>
        </div>
        <div class="likes">
          <p class="like">
            <van-icon
              name="like-o"
              class="likeicon"
            />
            <span>900</span>
          </p>
          <p class="like">
            <van-icon
              name="chat-o"
              class="likeicon"
            />
            <span>6</span>
          </p>
          <p class="like">
            <van-icon
              name="share-o"
              class="likeicon"
            />
            <span>分享</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 歌单列表 -->
    <div class="list">
      <ul>
        <li
          v-for="item in songlist"
          :key="item.id"
        >
          {{item.name}}
        </li>
      </ul>
    </div>

    <!-- 歌名name 歌手singer[0].name 专辑album.name -->
  </div>
</template>
<script>
export default {
  data: () => ({
    title: [],
    songlist: [],
    headurl: '',
    dissname: '',
    nickname: '',
    desc: '',
    logo: ''
  }),
  methods: {
    async getSongListDetail(dissid) {
      const res = await this.$http.getSongListDetail(dissid)
      this.songlist = res.data.response.cdlist[0].songlist
      // console.log(this.songlist)
      this.headurl = res.data.response.cdlist[0].headurl
      this.logo = res.data.response.cdlist[0].logo
      this.dissname = res.data.response.cdlist[0].dissname
      this.nickname = res.data.response.cdlist[0].nickname
      this.desc = res.data.response.cdlist[0].desc
      console.log(res)
    }
  },
  created() {
    this.dissid = this.$route.query.dissid
    this.getSongListDetail(this.dissid)
  }
}
</script>
<style lang="scss" scoped>
.songlist {
  .title {
    height: 240px;
    color: #c7c5c5;
    overflow: hidden;
    .imgbox {
      margin: 50px 16px 0;
      img {
        height: 120px;
        border-radius: 10px;
      }
    }
    .t_txt {
      margin-top: 30px;
      .nickname {
        display: flex;
        text-align: center;
        line-height: 4px;
        .headportrait {
          width: 30px;
          border-radius: 50%;
          margin-right: 10px;
          margin-bottom: 30px;
        }
      }
      .introduce {
        width: 240px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
      }
    }
  }
  .backimg {
    float: left;
    width: 100%;
    filter: blur(10px);
    height: 240px;
    text-align: center;
  }
  .content {
    position: absolute;
    .cont {
      display: flex;
    }
    .likes {
      color: #fff;
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      font-size: 16px;
      text-align: center;
      align-items: center;
      .likeicon {
        font-size: 20px;
      }
    }
  }
  .list {
    height: 800px;
    background-color: #fff;
    z-index: 999;
    // margin-top: 60px;
    border: 1px solid #fff;
  }
}
</style>
